
<template>
  <div>
    <!-- <el-form :model="dataForm" label-width="80px"  ref="dataForm"> -->
    <el-form
      class="addform"
      :model="dataForm"
      :rules="rules"
      ref="dataForm"
      label-width="120px"
    >
     <el-form-item prop="GID" label="可见机构">
                <el-cascader
                  v-model="dataForm.GID"
                  :options="organizeMix"
                  :props="{
                    multiple: false,
                    value: 'GID',
                    label: 'name',
                    children: 'children',
                    checkStrictly: true,
                    emitPath: false,
                    disabled:'disableds'
                  }"
                  :show-all-levels="false"
                  clearable
                >
                </el-cascader>
      </el-form-item>
      <el-form-item label="网格名称" prop="name">
        <el-input v-model="dataForm.name" placeholder="例：1"></el-input>
      </el-form-item>
      <el-form-item label="办公地址" prop="address">
        <el-input v-model="dataForm.address"></el-input>
      </el-form-item>
      <el-form-item label="总户数" prop="total">
        <el-input v-model="dataForm.total" placeholder="例：10"></el-input>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer cen">
      <el-button @click.native="closedialog">取消</el-button>
      <el-button type="primary" @click.native="submitForm">确认</el-button>
    </div>
  </div>
</template>

<script>
import fileUtils from "@/utils/fileUtils.js";
export default {
  props: {
    data: {
      type: Object,
    },
   
    departs:{
      type:Array
    },
      departs_arr:{
      type:Array
    }
  },
  data() {
    return {
      rules: {
       
      },
      dataForm: {
        name:'',
        address:'',
        photo: "",
        GID: "",
      },
     // 小区列表
      villageList: [],
      nations: this.$store.state.app.nations,
      education: [],
      types: [],
      
    };
  },
  methods: {
    // 关闭
    closedialog() {
      this.$emit("handleSave");
    },
    // 表单提交
    submitForm() {
      // this.dataForm.GID=JSON.parse(sessionStorage.getItem('userInfo')).GID
      console.log(this.dataForm)
      this.$refs["dataForm"].validate((valid) => {
        if (valid) {
          this.$confirm("确认提交吗？", "提示", {}).then(() => {
            this.editLoading = true;
            let params = Object.assign({}, this.dataForm);
            this.$api.suggestion
              .gridADD(params)
              .then((res) => {
                if (res.code == 0) {
                  this.$message({
                    message: "操作成功",
                    type: "success",
                  });
                  this.$emit("handleSave");
                  this.editLoading = false;
                } else {
                  this.$message({
                    message: "操作失败, " + res.msg,
                    type: "error",
                  });
                }
              });
          });
        }
      });
    },

    // // 拼接图片
    // getItemPhoto(id) {
    //   var url = this.global.baseUrlImage + "avatar/" + id;
    //   return url;
    // },
    // handleAvatarSuccess(res, file) {
    //   this.addImgUrl = URL.createObjectURL(file.raw);
    // },
    // beforeRead(file) {
    //   let that = this;
    //   return new Promise((resolve) => {
    //     fileUtils.getOrientation(file).then((orient) => {
    //       let reader = new FileReader();
    //       let img = new Image();
    //       reader.onload = (e) => {
    //         img.src = e.target.result;
    //         img.onload = async function () {
    //           let width = 600,
    //             height = 600 * (img.height / img.width);
    //           const data = await fileUtils.rotateImage(
    //             img,
    //             width,
    //             height,
    //             orient
    //           );
    //           const newFile = await fileUtils.dataURLtoFile(data, file.name);
    //           resolve(that.upLoad(newFile));
    //         };
    //       };
    //       reader.readAsDataURL(file);
    //     });
    //   });
    // },
    // //图片处理
    // getBase64(file) {
    //   return new Promise(function (resolve, reject) {
    //     let reader = new FileReader();
    //     let imgResult = "";
    //     reader.readAsDataURL(file);
    //     reader.onload = function () {
    //       imgResult = reader.result;
    //     };
    //     reader.onerror = function (error) {
    //       reject(error);
    //     };
    //     reader.onloadend = function () {
    //       resolve(imgResult);
    //     };
    //   });
    // },
    // // 编辑添加图片
    // async upLoad(param) {
    //   var imgup = "";
    //   await this.getBase64(param).then((res) => {
    //     imgup = res;
    //   });
    //   var paramd = {
    //     img: imgup,
    //   };
    //   this.$api.imgAdd.addimgPer(paramd).then((res) => {
    //     this.dataForm.photo = res.id;
    //   });
    // },
  },
 async mounted() {
    this.communitiesMix = await this.getCommunitiesMix();
    if (this.data.GID) {
      this.dataForm = this.data;
      this.dataForm.type = "1";
    }
    this.organizeMix = await this.getOrganizeMix();
    let dictList = JSON.parse(sessionStorage.getItem("dictData"));
    this.education = dictList.sys_education_type;
    this.types = dictList.sys_party_type;
  },
};
</script>
<style lang="scss" scoped>
.cen {
  text-align: center;
}
.row {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}
.mr20 {
  margin-right: 20px;
}
.addform {
  margin: 0 auto;
  display: flex;
  width: 100%;
  flex-wrap: wrap;
  justify-content: space-between;
  .el-form-item {
    width: 48%;
  }
  .el-form-item__content {
    .el-cascader {
      width: 100%;
    }
    .el-select {
      width: 100%;
    }
  }
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 150px;
  height: 150px;
  line-height: 150px;
  text-align: center;
}
.avatar {
  width: 150px;
  height: 150px;
}
</style>
